/* eslint-disable react/no-direct-mutation-state */
import React from 'react'
const Sub3 = () => {
	// https://react.docschina.org/docs/hooks-reference.html
	//会等待浏览器完成画面渲染之后才会调用 useEffect，因此会使得处理额外操作很方便。
	React.useEffect(() => {
		// 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数
	}, [])
}
class SubAll3 extends React.Component {
	// 一个类组件特有的函数
	// 里面的值props包含所有从别的组件传来的值
	constructor(props) {
		// 超全局变量 向外开放props值
		super(props)
		// 这里面的属性可以給当前类组件使用 相当于vue的data
		this.state = {
			tips: '我是constructor函数里面的this.state的属性',
			date: new Date(),
		}
	}
	/* 源码改变是会重新初始化组件
	 * 这个就是Demo3组件初始化创建的时候才会执行的方法
	 * 并且只会执行一次，此时可以通过setState去修改 类组件的this.state的值
	 *  */
	componentDidMount() {
		console.log(this.state)
		this.state.tips = '我是componentDidMount里面的this.state的属性'
		// this.setState()当该方法创建时
		// componentDidMount()内所有的属性都可以修改constructor里面的state
		this.setState({
			tips: '我修改了this.state的值',
			Add: '我往this.state里面添加了一个Add属性',
		})
		// 组件初始化时创建一个定时器
		this.itmer = setInterval(() => {
			this.UpDateData()
		}, 1000)
	}
	// 在退出当前这个类组件时调用的生命周期
	componentWillUnmount() {}
	// 创建一个回调函数 也可以看做生命周期，在当前页面渲染完成后执行
	UpDateData() {
		// 修改this.state的date属性 值为当前时间的时间戳
		this.setState({
			date: new Date(),
		})
	}

	render() {
		return (
			<>
				<div className="nav2">
					<h4>3.生命周期 回调函数</h4>
					<p>{this.state.tips}</p>
					<p>{this.state.Add}</p>
					<h3>现在的时间为:{this.state.date.toLocaleString()}</h3>
				</div>
			</>
		)
	}
}
export default SubAll3
